<template>
	<view class="ucCourtesy">
		<image class="iconImage" :src="require('../../static/image/uc/uc_hander.png')"></image>
		<TopWxHander/>
		<view class="content">
			<view class="content-image-group">
				<view @click="goInfo" class="content-image-title">
					<text class="content-image-info">详细优惠 <text class="iconfont">&#xe65b;</text> </text>
				</view>
				<view class="uclink">
					<view  v-for="(item,index) in urlLink" :key="index" class="ucLinkItem">
						<image class="ucImage" :src="item.pic"></image>
						<text class="ucText">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopWxHander from '../../compoment/TopWxHander/TopWxHander.vue'
	import Ajax from '../../ajax/index'
	import {
		homeApi,
	} from '../../ajax/api.js'
	export default {
		data() {
			return {
				urlLink:[]
			}
		},
		methods: {
			goPayUser(){
				uni.navigateTo({
					url: '/pages/activity/purchase'
				})
			},
			goInfo(){
				uni.navigateTo({
					url: '/pages/uc/ucCourtesyInfo'
				})
			},
			async urlLinkData() {
				let {
					code,
					data
				} = await Ajax({
					url: homeApi.benefitList
				})
				if (code === 0) {
					if (data) {
						this.urlLink = data
					}
				}
			}
		},
		components:{
			TopWxHander
		},
		mounted() {
			this.urlLinkData()
		}
	}
</script>

<style lang="less">
	.ucCourtesy {
		height: 110%;
		flex: 1;
		background: #3F2F47;
		position: relative;
		.btn-pay-user {
			background: linear-gradient(146deg, #F8E8CA 0%, #F1C29A 100%);
			border-radius: 10rpx;
			margin: 15rpx 32rpx 0 32rpx;
			height: 100rpx;
			display: flex;
			justify-items: center;
			justify-content: center;
			.btn-pay-user-text {
				line-height: 100rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #402F47;
			}
		}
		.content-image-group {
			margin: 15rpx 32rpx;
			margin-top: 396rpx;
			height: 880rpx;
			overflow-y: auto;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 10rpx;
			border: 2rpx solid #A88E84;
			.content-image-title {
				padding: 30rpx 166rpx;
				text-align: right;
				color: #D7D1DA;
				height:40rpx;
			}
			.uclink {
				display: flex;
				flex-wrap: wrap;
				.ucLinkItem{
					width: 150rpx;
					margin: 0 38rpx;
					margin-bottom: 50rpx;
				}
				.ucImage {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
				.ucText{
					font-size: 22rpx;
					font-weight: 400;
					color: #F1C39C;
					line-height: 28rpx;
					display: block;
					text-align: center;
				}
			}
			.content-image-info {
				font-size: 24rpx;
				font-weight: 400;
				position: absolute;
			}

			.iconfont {

				font-size: 24rpx;
				font-weight: 600;
			}
		}

		.iconImage {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 702rpx;
		}

		.content {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			z-index: 10;
		}

		.content-group {
			padding: 20rpx 60rpx 0 60rpx;

			>text {
				display: block;
			}
		}

		.content-title {
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 0.71);
			line-height: 30rpx;
			padding-bottom: 10rpx;
		}

		.content-title-info {
			padding: 10rpx 0;
			font-size: 22rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 0.71);
			line-height: 30rpx;
		}
	}
</style>
